<template>
    <div class="container">
        <el-form :model="register" label-width="80px" class="demo-ruleForm" :rules="rules">
            <el-row type="flex" justify="center">
                <el-col :span="12">
                    <el-form-item label="病历号" prop="caseNumber">
                        <el-input v-model.number="register.caseNumber" @change="searchMedicalId"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-form ref="form" :rules="rules" :model="prescription" label-width="80px">
            <el-row type="flex" justify="center">
                <el-col :span="12">
                    <el-form-item label="病历ID" prop="medicalID">
                        <el-input v-model.number="prescription.medicalID" disabled=""></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="12">
                    <el-form-item label="处方名称" prop="prescriptionName">
                        <el-input v-model="prescription.prescriptionName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row justify="center" type="flex">
            <el-transfer :button-texts="['移出处方', '加入处方']" :data="drugs" :titles="['仓库', '处方']"
                         @change="handleChange"
                         filterable id="trans"
                         v-model="value"></el-transfer>
        </el-row>
        <el-row justify="center" type="flex">
            <el-col>
                <el-divider></el-divider>
            </el-col>
        </el-row>
        <el-row :gutter="10" :key="item" v-for="item in value" class="container">
            <el-col :span="7" :offset="4">
                <div class="title">
                    {{drugs[item-1].label}}
                </div>
            </el-col>
            <el-col :span="3">
                <el-input placeholder="用法" v-model="prescriptionDetaileds[item].drugsUsage"
                          @input="change()"></el-input>
            </el-col>
            <el-col :span="3">
                <el-input placeholder="用量" v-model="prescriptionDetaileds[item].dosage" @input="change()"></el-input>
            </el-col>
            <el-col :span="3">
                <el-input placeholder="频次" v-model="prescriptionDetaileds[item].frequency" @input="change()"></el-input>
            </el-col>
            <el-col :span="3">
                <el-input placeholder="数量" v-model.number="prescriptionDetaileds[item].amount"
                          @input="change()"></el-input>
            </el-col>
        </el-row>
        <el-row v-if="value.length>0">
            <el-divider></el-divider>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
        </el-row>
    </div>
</template>

<script>
    import {HOST} from "../../common/config";

    export default {
        name: "addPrescription",
        data() {
            const generateData = _ => {
                let path = `${HOST}/drugs`;
                let drugs = [];
                this.$ajax.get(path).then((res) => {
                    res.data.forEach((item) => {
                        let drug = {
                            key: item.id,
                            label: item.drugsName,
                            disabled: item.delMark !== 1
                        }
                        drugs.push(drug);
                    })
                })
                return drugs;
            };
            return {
                register: {
                    caseNumber: ""
                },
                drugs: generateData(),
                value: [],
                prescriptionDetaileds: [],
                prescription: {
                    medicalID: '',
                    prescriptionName: ''
                },
                rules: {
                    caseNumber:[
                        {required: true, message: '请输入病历号', trigger: 'blur'},
                        {type: 'number', message: '病历号必须为数字值'}
                    ],
                    medicalID: [
                        {required: true, message: '请检查病历号输入是否正确', trigger: 'blur'},
                    ],
                    prescriptionName: [
                        {required: true, message: '请输入处方名称', trigger: 'blur'},
                    ],
                    amount: [
                        {required: true, message: '请输入数量', trigger: 'blur'},
                        {type: 'number', message: '数量必须为数字值'}
                    ]
                }
            };
        },
        mounted() {

        },
        methods: {
            handleChange(value, direction, movedKeys) {
                movedKeys.forEach((item) => {
                    this.prescriptionDetaileds[item] = {
                        drugsUsage: '',
                        dosage: '',
                        frequency: '',
                        amount: ''
                    }
                })
            },
            change() {
                this.$forceUpdate()
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var res = [];
                        this.value.forEach((item, index) => {
                            res[index] = this.prescriptionDetaileds[item];
                        })
                        let path = `${HOST}/prescription/add`;
                        let param = {
                            ids: [],
                            prescriptionDetaileds: [],
                            prescription: this.prescription
                        }
                        param.ids = this.value;
                        param.prescriptionDetaileds = res;
                        this.$ajax.post(path, param).then((res) => {
                            if (res.data === 1) {
                                this.$message.success("添加成功！")
                            } else {
                                this.$message.error("请检查病历ID是否正确！");
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            searchMedicalId() {
                let path = `${HOST}/medicalRecord?caseNumber=${this.register.caseNumber}`;
                this.$ajax.get(path).then((res) => {
                    console.log(res.data);
                    this.prescription.medicalID = res.data.id;
                })
            }
        }
    }
</script>

<style>
    .el-transfer-panel {
        width: 300px;
    }

    .el-transfer-panel__item {
        display: block;
    }

    .title {
        text-align: left;
        margin-top: 10px

    }

    .container {
        margin-top: 10px;
    }
</style>